<template>
  <div class='shoppingcart'>
    <Heads types="shopcart"></Heads>

    <div class="content">
      <div v-if="cartGoods.length>0">
        <div v-for="(item) in cartGoods" :key="item.goodsId+item.selectedId">
          <van-swipe-cell>
            <!-- 内容 -->
            <van-checkbox-group v-model="checkGroupArr">
              <van-card
                style="text-align: left;"
                :thumb="item.goods_info.picture"
                :price="item.goods_info.price | decimalPoint"
                origin-price="999.00">
                <div slot="title" class="van-ellipsis" style="font-size: .32rem;color:#000;padding: .1rem 0;">
                  {{item.goods_info.title}}
                </div>
                <div slot="desc">
                  <p>规格: {{item.s1}} | {{item.s2}}</p>
                </div>
                <!-- <div slot="tag">
                  <van-checkbox style="border:.025rem solid rgb(189, 67, 10);border-radius:50%;" :value="item" checked-color="#ff5f16" :name="item" />
                </div> -->
                <div slot="tags">
                  <van-tag plain type="danger">new</van-tag>
                </div>
                <div slot="footer">
                  <div class="footer-left">
                    <van-checkbox label-position="left" :value="item" checked-color="#ff5f16" :name="item">
                      勾选:
                    </van-checkbox>
                  </div>
                  <div class="foter-right">
                    <van-stepper v-model="item.selectedNum" disabled-input
                    @minus="addsubFunc(item)" @plus="addsubFunc(item)" />
                  </div>
                </div>
              </van-card>
            </van-checkbox-group>
            <!-- 删除 -->
            <van-button
              slot="right"
              style="height: 100%;"
              square
              text="删除"
              @click="remove(item)"
              type="danger"
              class="delete-button"/>
          </van-swipe-cell>
        </div>
      </div>
      <div v-else :style="{
        height: '.6rem','background-color': '#ddd',color: '#bdc0c5','font-size': '.3rem','text-align': 'center',margin: '.2rem .2rem','line-height': '.6rem','box-sizing': 'border-box'
        }" class="no-more">- 购物车空空如也~~ -</div>
    </div>

    <div class="submit">
      <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
        <van-checkbox checked-color="#ff5f16" v-model="checkAll">全选</van-checkbox>
        <van-button v-if="checkAll" @click="deleteAll" style="margin-left: .15rem;" type="danger" size="mini">删除全部</van-button>
      <!-- <span slot="tip"> 你的收货地址不支持同城送, <span>修改地址</span> </span> -->
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import http from '@/utils/axios'
import Vue from 'vue'
import { Toast, Card, Tag, Button, SubmitBar, Checkbox, Stepper, CheckboxGroup, SwipeCell } from 'vant'
Vue.use(Toast).use(Card).use(Tag).use(Button).use(SubmitBar).use(Checkbox).use(Stepper).use(CheckboxGroup).use(SwipeCell)

export default {
  data () {
    return {
      cartGoods: [],
      checkGroupArr: []
    }
  },
  computed: {
    checkAll: {
      get: function () {
        if (this.cartGoods.length !== 0 && this.cartGoods.length === this.checkGroupArr.length) {
          return true
        } else {
          return false
        }
      },
      set: function (newVal, oldVal) {
        if (newVal) {
          this.checkGroupArr = [...this.cartGoods]
        } else {
          this.checkGroupArr = []
        }
      }
    },
    totalPrice: {
      get: function () {
        let total = 0
        this.checkGroupArr.forEach((item, i) => {
          total += item.goods_info.price * item.selectedNum
        })
        return total
      }
    }
  },
  methods: {
    ...mapMutations('footerModule', ['FOOTERSHOW']),
    ...mapMutations('payModule', ['SETTYPES', 'SETLIST']),
    ...mapMutations('footerModule', ['FOOTERCART']),
    onSubmit () {
      // console.log('提交')
      console.log(this.checkGroupArr)
      this.SETTYPES('list')
      this.SETLIST(this.checkGroupArr)
      this.$router.push({ name: 'Paymentpage' })
    },
    addsubFunc (item) {
      http({
        url: '/vant/addsub',
        method: 'POST',
        data: {
          item
        }
      }).then(res => {
        if (res.data.code !== 200) {
          Toast({
            message: '操作失败~~~',
            closeOnClick: true
          })
        } else {
          const num = this.cartGoods.map(item => {
            return item.selectedNum
          }).reduce((a, b) => a * 1 + b * 1)
          this.FOOTERCART(num)
        }
      })
    },
    remove (item) {
      http({
        url: '/vant/cart-delete',
        method: 'POST',
        data: {
          item
        }
      }).then(res => {
        if (res.data.code === 200) {
        // 删除成功,页面也要假装删除
          this.checkGroupArr = this.checkGroupArr.filter((check, i) => {
            if (check.goodsId !== item.goodsId || (check.goodsId === item.goodsId && check.selectedId !== item.selectedId)) {
              return this.cartGoods[i]
            }
          })
          this.cartGoods = this.cartGoods.filter((check, i) => {
            if (check.goodsId !== item.goodsId || (check.goodsId === item.goodsId && check.selectedId !== item.selectedId)) {
              return this.cartGoods[i]
            }
          })
          const num = this.cartGoods.map(item => {
            return item.selectedNum
          }).reduce((a, b) => a * 1 + b * 1)
          this.FOOTERCART(num)
        }
      })
    },
    deleteAll () {
      const token = JSON.parse(sessionStorage.userInfo).token
      http({
        url: '/vant/cart-deleteall',
        method: 'POST',
        data: {
          user: token
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.checkGroupArr = []
          this.cartGoods = []
          this.FOOTERCART('')
        }
      })
    }
  },
  mounted () {
    this.FOOTERSHOW(false)

    if (sessionStorage.userInfo) {
      const token = JSON.parse(sessionStorage.userInfo).token
      if (token) {
        // console.log('一登录')
        http({
          url: '/vant/cart',
          method: 'POST',
          data: { user: token }
        }).then(res => {
          if (res.data.code === 200) {
            this.cartGoods = res.data.result
            const num = this.cartGoods.map(item => {
              return item.selectedNum
            }).reduce((a, b) => a * 1 + b * 1)
            this.FOOTERCART(num)
          }
        })
      } else {
        this.$router.push({ name: 'User-type', params: { type: 'login' } })
        Toast({
          message: '请先去登录吧~',
          closeOnClick: true
        })
      }
    } else {
      this.$router.push({ name: 'User-type', params: { type: 'login' } })
      Toast({
        message: '请先去登录吧~',
        closeOnClick: true
      })
    }
  },
  destroyed () {
    this.FOOTERSHOW(true)
  }
}
</script>

<style lang='scss' scoped>
.shoppingcart {
  .content {
    margin: .09rem 0;
    height: 11rem;
    overflow-y: auto;
    .van-swipe-cell {
      .van-card__footer {
        .footer-left {
          width: 50vw;
          float: left;
          .van-checkbox {
              margin-top: .12rem;
          }
        }
        .footer-right {
          width: 50vw;
          float: right;
        }
      }
    }
  }
  .submit {
    .van-submit-bar {
      position: fixed;
      bottom: 0;
      height: 1.2rem;
    }
  }
}
</style>
